<template>
    <div class="main-container">
        <div class="main-content">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <div class="login-container">
                        <div class="center_1">
                            <h1>
                                <i class="ace-icon fa fa-leaf green"></i>
                                <span class="red">JC</span>
                                <span class="white" id="id-text2">在线视频网站</span>
                            </h1>
                        </div>

                        <div class="space-6"></div>

                        <div class="position-relative">
                            <div id="login-box" class="login-box visible widget-box no-border">
                                <div class="widget-body">
                                    <div class="widget-main">
                                        <h4 class="header blue lighter bigger">
                                            <i class="ace-icon fa fa-coffee green"></i>
                                            登录后台
                                        </h4>

                                        <div class="space-6"></div>

                                        <form @keydown.enter="login">
                                            <fieldset>
                                                <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="text" class="form-control" v-model="user.loginName" placeholder="请输入用户名"/>
															<i class="ace-icon fa fa-user"></i>
														</span>
                                                </label>

                                                <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="password" class="form-control" v-model="user.password" placeholder="请输入密码"/>
															<i class="ace-icon fa fa-lock"></i>
														</span>
                                                </label>
                                                <label class="block clearfix">
                                                      <span class="block input-icon input-icon-right">
                                                        <div class="input-group">
                                                          <input v-model="user.imageCode" type="text" class="form-control" placeholder="验证码">
                                                          <span class="input-group-addon" id="basic-addon2">
                                                            <img v-on:click="loadImageCode()" id="image-code" alt="验证码"/>
                                                          </span>
                                                        </div>
                                                      </span>
                                                </label>

                                                <div class="space"></div>

                                                <div class="clearfix">
                                                    <label class="inline">
                                                        <input v-model="remember" type="checkbox" class="ace"/>
                                                        <span class="lbl" > 记住账户密码</span>
                                                    </label>

                                                    <button  type="button" @click="login"
                                                            class="width-35 pull-right btn btn-sm btn-primary">
                                                        <i class="ace-icon fa fa-key"></i>
                                                        <span class="bigger-110">登录</span>
                                                    </button>
                                                </div>

                                                <div class="space-4"></div>
                                            </fieldset>
                                        </form>

                                        <div class="social-or-login ">
                                            <span class="bigger-110">CopyRight@WJC 2022</span>
                                        </div>

                                        <div class="space-6"></div>


                                    </div><!-- /.widget-main -->


                                </div><!-- /.widget-body -->
                            </div><!-- /.login-box -->

                         </div><!-- /.position-relative -->

                     </div>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.main-content -->
    </div><!-- /.main-container -->

</template>

<style scoped>
    .center_1{
        position: relative;
        left: 10%;
    }
    .input-group-addon{
        padding: 0;
    }
</style>

<script scope>

  import axios from 'axios';
  import {defineComponent, onMounted, ref} from 'vue';
  import router from "@/router";
    export default {
        name: 'login',
      setup(){
            const user=ref({});
            let remember=ref(false);
            const imageCodeToken=ref();

            //登录
            const login=()=>{

                if (1 != 1
                    || !Validator.require(user.value.password, "密码")
                    || !Validator.require(user.value.loginName, "用户名")
                    || !Validator.require(user.value.imageCode, "验证码")
                    || !Validator.length(user.value.password, "密码", 1, 32)
                ) {
                    return;
                }


                // let passwordShow=user.value.password;
                let md5=hex_md5(user.value.password);
                let rememberUser=LocalStorage.get(LOCAL_KEY_REMEMBER_USER) || {};
                //判断缓存里的md5是不是和文本框输入的值一致
                if(md5!==rememberUser.md5){
                    //若不一致则说明密码被修改过，故需要对密码加密
                    user.value.password=hex_md5(user.value.password+KEY);
                }
                //将图片验证码token赋值给user对象
                user.value.imageCodeToken=imageCodeToken.value;
                Loading.show();
                axios.post("/system/admin/user/login",user.value).then((response)=>{
                   Loading.hide();
                    const data=response.data;
                    if(data.success){
                        const loginuser=data.content;
                        //存入session
                        Tool.setLoginUser(loginuser);
                        //若勾选记住账户密码
                        if(remember.value===true){
                            //这里保存密码密文，并保存密码md5,用于检测密码是否被修改过。
                            let md5=hex_md5(user.value.password);
                            LocalStorage.set(LOCAL_KEY_REMEMBER_USER,{
                                loginName: loginuser.loginName,
                                password: user.value.password,
                                md5: md5
                            });
                        }else{
                            LocalStorage.set(LOCAL_KEY_REMEMBER_USER, null);
                        }
                        router.push("/welcome");
                    }else{
                        Toast.error(data.message);
                        user.value.password="";
                        loadImageCode();
                    }
                })
            }

            //加载验证码
          const loadImageCode=()=>{
                //生成uuid
                imageCodeToken.value=Tool.uuid(8);
                $('#image-code').attr('src',process.env.VUE_APP_SERVER+'/system/admin/kaptcha/image-code/'+imageCodeToken.value);
          }

            onMounted(()=>{
                loadImageCode();
                let rememberUser=LocalStorage.get(LOCAL_KEY_REMEMBER_USER);
                if(rememberUser){
                    user.value=rememberUser;
                }
            })


            return{
                login,
                user,
                remember,
                loadImageCode
            }
      },
      mounted() {
          $('body').attr('class', 'login-layout light-login');
      }
    }
</script>
